<template>
  <div
    class="app-container"
    style="width: 100%; height: 100%; background-color: #fff; padding: 20px"
  >
    <el-scrollbar height="75vh" id="conversationalDiv" ref="scrollbarRef">
      <!--style="border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)"-->
      <p
        v-for="(v, i) in chatList"
        :key="i"
        :class="{
          'scrollbar-left-item': v.type == 0,
          'scrollbar-right-item': v.type == 1,
        }"
      >
        <img
          v-if="v.type == 0"
          src="../../assets/bot.png"
          style="width: 40px; height: 40px; margin-right: 10px"
        />
        <span style="padding: 8px" class="msg-container">{{ v.msg }}</span>
        <img
          v-if="v.type == 1"
          src="../../assets/avatar.gif"
          style="width: 40px; height: 40px; margin-left: 10px"
        />
      </p>
    </el-scrollbar>
    <div class="mt-4">
      <el-autocomplete
        :fetch-suggestions="suggestions"
        v-model="input"
        :disabled="disabledStatus"
        placeholder="请输入"
        @select="handleSelect"
        size="large"
        style="border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)"
      >
        <template #append>
          <el-button type="primary" @click="handleSend">发送</el-button>
        </template>
      </el-autocomplete>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import AiAPI from "@/api/ai";
import { ElMessage } from "element-plus";
import { ElScrollbar } from "element-plus";
import axios from "axios";
// type1 自己 0机器人
const chatList = reactive([
  {
    type: 0,
    msg: "Hi，我是环保小助手，很高兴认识你，你可以随时把环保问题发给我，我来帮你解答",
  },
]);

const input = ref("");

const disabledStatus = ref(false);

const suggestions = reactive([
  { value: "解释一下空气质量指数（AQI）" },
  { value: "分析PM2.5超标的原因和危害" },
  { value: "今天空气质量较差，出行有什么防护建议？" },
]);

const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

const handleSelect = (item: any) => {
  console.log(item);
  input.value = item.value;
};

const handleSend = () => {
  console.log("方法");
  AiAPI.send(input.value).then((res) => {
    console.log(res);
    let json = JSON.parse(res);
    chatList.push({
      type: 0,
      msg: json.choices[0].message.content.replace(/\s/g, ""),
    });
    input.value = "";
    disabledStatus.value = false;
    scrollbarRef.value!.setScrollTop(900000);
  });
  chatList.push({
    type: 1,
    msg: input.value,
  });
  scrollbarRef.value!.setScrollTop(900000);
  input.value = "环保小助手思考中......";
  disabledStatus.value = true;
};
</script>

<style lang="scss" scoped>
.scrollbar-left-item {
  display: flex;
  align-items: center;
  justify-content: left;
  margin: 10px;
  text-align: left;
  border-radius: 4px;
}

.scrollbar-right-item {
  display: flex;
  align-items: center;
  justify-content: right;
  margin: 10px;
  text-align: right;
  border-radius: 4px;
}

.msg-container {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  /*background-color: #e2fffe;  背景色示例 */
  background-color: #ecfdfc;
  max-width: 70%; /* 限制聊天内容的最大宽度 */
}

.el-input {
  height: 40px;
}
</style>
